<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/bootstrap.css">

	<title>Bootstrap 4</title>
</head>
<body>


<div class="container">
	<div class="row">
		<div class="col">
			<h1>H1 Title</h1>
			<h2>H2 Title</h2>
			<h3>H3 Title</h3>
			<h4>H4 Title</h4>
			<h5>H5 Title</h5>
			<h6>H6 Title</h6>

			<p class="h1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, facere.</p>
			<p class="h2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <small class="text-muted">Voluptatem, facere.</small></p>
			<p class="h3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <small class="text-muted">Voluptatem, facere.</small></p>
			<p class="h4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, facere.</p>
			<p class="h5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, facere.</p>
			<p class="h6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, facere.</p>

			<p class="display-1">Display-1</p>
			<p class="display-2">Display-2</p>
			<p class="display-3">Display-3</p>
			<p class="display-4">Display-4</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae est ipsam incidunt explicabo expedita optio quas error a maxime saepe.</p>
			<p class="lead">Quia quod esse voluptatem, aspernatur cupiditate ut dolores, voluptatum eum labore corrupti libero officiis enim, rem beatae ab iure temporibus?</p>
			<p>Omnis quia aperiam assumenda voluptatem consequatur recusandae vero dicta a nulla harum, eum adipisci praesentium expedita ea asperiores, inventore! Nihil.</p>


			<p>Lorem <abbr title="блок элемент модификатор">БЭМ</abbr> ipsum dolor sit amet, <mark>consectetur adipisicing elit</mark>. Neque, hic.</p>
			<p>Lorem <abbr title="Крупная компания">Apple</abbr> ipsum dolor sit amet, <del>consectetur adipisicing elit</del>. Aliquam, aperiam.</p>
			<p>Lorem ipsum dolor sit amet, <s>consectetur adipisicing elit</s>. Vero, in.</p>
			<p>Lorem ipsum dolor sit amet, <ins>consectetur adipisicing elit</ins>. Doloremque, unde!</p>
			<p>Lorem ipsum dolor sit amet, <u>consectetur adipisicing elit</u>. Corporis, voluptas!</p>
			<p>Lorem ipsum dolor sit amet, <small>consectetur adipisicing elit</small>. Quidem, quas!</p>
			<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>. Mollitia, eligendi.</p>
			<p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>. Eveniet, consequatur.</p>



			<blockquote class="blockquote">
				<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, a.</p>
				<footer class="blockquote-footer">
					какой-то автор
				</footer>
			</blockquote>



			<ul class="list-unstyled">
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>
					<ul class="list-inline">
						<li class="list-inline-item">Lorem ipsum dolor.</li>
						<li class="list-inline-item">Lorem ipsum dolor.</li>
						<li class="list-inline-item">Lorem ipsum dolor.</li>
						<li class="list-inline-item">Lorem ipsum dolor.</li>
					</ul>
				</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
				<li>Lorem ipsum dolor sit amet.</li>
			</ul>


			<p>Lorem ipsum dolor sit amet, <code>&lt;section&gt;</code> consectetur adipisicing elit. Nobis quasi ex laudantium. Labore dolores perferendis dolorem, hic nihil, veniam, nesciunt nobis sed doloribus tempora animi.</p>


			<p>Lorem ipsum dolor sit amet, <code> &lt;p&gt; consectetur adipisicing elit.&lt;/p&gt; &lt;p&gt; Excepturi voluptas eveniet &lt;/p&gt;</code> fugiat, expedita beatae earum cum totam eos nam ea laboriosam tenetur similique, culpa esse.</p>


			<p>Lorem ipsum <var>x</var> = <var>y</var> + <var>z</var> dolor sit amet.</p>


			<p>Lorem ipsum dolor <kbd>Ctr</kbd> + <kbd>Alt</kbd> + <kbd>delete</kbd> sit amet, consectetur adipisicing elit. Ex?</p>


			<table class="table table-hover table-bordered">
				<thead class="">
					<tr>
						<th scape="col">#</th>
						<th scape="col">First</th>
						<th scape="col">Second</th>
						<th scape="col">Nick</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-active">
						<th scape="row">1</th>
						<th>Albert</th>
						<th>Bob</th>
						<th>bob</th>
					</tr>
					<tr class="table-primary">
						<th scape="row">2</th>
						<th>Roman</th>
						<th>Rob</th>
						<th>rob</th>
					</tr>
					<tr class="table-secondary">
						<th scape="row">3</th>
						<th>Anton</th>
						<th>Kray</th>
						<th>Kray</th>
					</tr>
					<tr class="table-">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr class="table-success">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr class="table-danger">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr class="table-warning">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr class="table-info">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr class="table-light">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr class="table-dark">
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
				</tbody>
			</table>
			<table class="table table-hover table-dark table-bordered">
				<thead class="">
					<tr>
						<th scape="col">#</th>
						<th scape="col">First</th>
						<th scape="col">Second</th>
						<th scape="col">Nick</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scape="row">1</th>
						<th>Albert</th>
						<th>Bob</th>
						<th>bob</th>
					</tr>
					<tr>
						<th scape="row">2</th>
						<th>Roman</th>
						<th>Rob</th>
						<th>rob</th>
					</tr>
					<tr>
						<th scape="row">3</th>
						<th>Anton</th>
						<th>Kray</th>
						<th>Kray</th>
					</tr>
					<tr>
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr>
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr>
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr>
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr>
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
					<tr>
						<th scape="row">4</th>
						<th>Jon</th>
						<th>jack</th>
						<th>jack</th>
					</tr>
				</tbody>
			</table>




			<figure class="figure">
				<img src="img/1.jpg" alt="" class="figure-img img-fluid rounded ">
				<figcaption class="figure-caption text-right">
					картинка
				</figcaption>
			</figure>

			<img src="img/1.jpg" alt="" class="rounded img-fluid float-right">



		</div>
	</div>
</div>

	
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
	<script src="js/main.js"></script>
</body>
</html>